<template>
	<view class="page-container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<x-back-btn color="white"></x-back-btn>
				<view class="u-f-40 common-title">{{ lang_order.refundDetail }}</view>
				<view></view>
			</view>
		</view>

		<mescroll-body height="calc(100vh - 98rpx - var(--status-bar-height))" ref="mescrollRef" @init="mescrollInit"
			@down="downCallback" @up="upCallback">
			<view>
				<!-- 状态信息 -->
				<order-status-card :info="dataInfo" :is-refund="true"></order-status-card>
				
				<view v-if="refundMessage.key" class="flex bg-white user-card">
					<view class="u-f-28 u-lh-40 font-medio">
						{{ lang_order[refundMessage.key] || '' }}
					</view>
				</view>

				<!-- 商品卡片 -->
				<view>
					<view v-for="(item, index) in itemList" :key="index">
						<view v-if="[5, 7].includes(dataInfo.orderType)">
							<coupon-card :item="({ ...item, couponType: 3, canBuy: false })"></coupon-card>
						</view>
						<goods-card v-else :item="dealItem(item)" :score="dataInfo.payType === 1"></goods-card>
					</view>
				</view>
				
				<!-- 退款原因、退款金额、备注信息、图片 -->
				<view class="bg-white u-m-t-10" style="padding: 32rpx 40rpx 38rpx 36rpx;">
					<view class="u-f-34 u-lh-46 font-bold">{{ lang_order.saledRefundOrigin }}</view>
					<view class="u-m-t-16 u-f-26 u-lh-36">{{ dataInfo.action || '' }}</view>
				</view>
				
				<view class="bg-white u-m-t-10 flex-center-between" style="padding: 32rpx 0 38rpx 36rpx;">
					<view class="u-f-32 u-lh-44 font-medio">{{ lang_order[`saledRefund${ dataInfo.payType === 1 ? 'Score' : 'Cash' }`] }}</view>
					<view class="u-p-r-46 u-f-32 u-lh-38 font-bold color-red">{{ dataInfo.payType === 1? `${ (dataInfo.totalIntegral || 0) + lang_common.score }` : `${ lang_unit.money + (dataInfo.totalAmount || 0) }` }}</view>
				</view>
				
				<view v-if="dataInfo.remark" class="bg-white u-m-t-10" style="padding: 32rpx 40rpx 38rpx 36rpx;">
					<view class="u-f-28 u-lh-40">{{ lang_order.remarkInfo }}</view>
					<view class="u-m-t-8 u-f-26 u-lh-36">{{ dataInfo.remark || '' }}</view>
				</view>
				
				<view class="bg-white u-m-t-10" style="padding: 32rpx 20rpx 18rpx;">
					<u-row>
						<u-col v-for="(item, index) in refundImages" :key="index" :span="4">
							<view class="u-p-b-20" style="height: 120rpx;" @click="previewImage(refundImages.map(_item => showImage(_item.fileUrl, 'logo')), index)">
								<x-image :src="showImage(item.fileUrl, 'logo')" mode="aspectFill"/>
							</view>
						</u-col>
					</u-row>
				</view>

				<!-- 商家同意退款后展示 -->
				<order-sendback v-if="dataInfo.platformAddress" :info="dataInfo.platformAddress"></order-sendback>
				
				<!-- 售后信息 -->
				<refund-status-info :info="dataInfo"></refund-status-info>
			</view>
		</mescroll-body>

		<!-- 留空 -->
		<view style="height: 200rpx;"></view>

		<!-- 底部操作栏 -->
		<x-fixed-bottom v-if="showButton">
			<view class="flex-center-between u-p-28">
				<view class="u-text-center" @click="changeCallAction">
					<image src="@/static/image/order/contact_black.png" style="width: 48rpx; height: 48rpx;"
						class="clear-flex"></image>
					<view class="u-m-t-10 u-f-20 u-lh-26 color-grew">{{ lang_common.contactCustomer }}</view>
				</view>

				<order-status-button :item="dataInfo" @change="buttonAction"></order-status-button>
			</view>
		</x-fixed-bottom>

		<!-- 按钮操作 -->
		<order-deal v-model="visible" :type="typeKey" :order-number="orderNumber" @change="downCallback()"></order-deal>
		<x-pay-select v-model="selectVisible" @change="changeSelect"></x-pay-select>
		<permission-unAuthTips v-model="settingValue"></permission-unAuthTips>
	</view>
</template>

<script>
	import {
		payAction
	} from '@/utils/pay.js'
	import { orderInfo } from '@/api/user/order.js'
	import {
		refundInfo,
		refundCancel
	} from '@/api/user/saled.js'
	import OrderSendback from './components/order-sendback.vue'
	import OrderStatusCard from './components/order-status-card.vue'
	import RefundStatusInfo from './components/refund-status-info.vue'
	import OrderStatusButton from './components/order-status-button.vue'
	
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			OrderSendback,
			OrderStatusCard,
			RefundStatusInfo,
			OrderStatusButton
		},
		data() {
			return {
				refundMessages: [
					{ value: 0, key: 'examineFirstTips', label: '平台已经收到您的申请，会在第一时间为您审核，请耐心等待' },
					{ value: 1, key: 'examineSecondTips', label: '请按照以下地址进行退货，并填写退货单号' },
					{ value: -1, key: 'examineThirdTips', label: '售后已关闭' },
					{ value: -2, key: 'examineThirdTips', label: '售后已关闭' },
					{ value: 3, key: 'examineFouthTips', label: '售后已完成' }
				],
				orderNumber: '',
				showButton: true,
				dataInfo: {},
				orderInfo: {},

				addressObj: {},

				visible: false,
				typeKey: '',

				selectVisible: false,
				
				settingValue: ''
			}
		},
		computed: {
			refundMessage() {
				let { refundStatus } = this.dataInfo
				return this.refundMessages.find(item => item.value === refundStatus) || {}
			},
			refundImages() {
				return this.dealImage(this.dataInfo.imgUrls || '')
			},
			itemList() {
				let {
					itemList
				} = this.orderInfo
				itemList = itemList || this.dataInfo.itemList || []
				itemList = itemList || []
				return itemList.map(item => ({
					...item,
					discountPrice: item.finalPrice,
					specs: item.stockSpecs,
					title: item.goodsName
				}))
			}
		},
		onLoad({
			orderNumber,
			showButton
		}) {
			this.orderNumber = orderNumber
			this.showButton = !!showButton
		},
		methods: {
			async changeCallAction() {
				this.settingValue = await this.callAction(this.contactPhone)
			},
			// 按钮触发后
			buttonAction(item) {
				this.typeKey = item.key
				if (item.key === 'toPay') {
					this.selectVisible = true
				} else {
					this.visible = true
				}
			},
			// 点击确定后
			changeSelect(type) {
				payAction(type, this.orderNumber).finally(() => {
					this.downCallback()
				})
			},
			// 处理内容
			dealItem(item) {
				let {
					finalPrice,
					stockSpecs,
					goodsName,
					goodsImage
				} = item
				return ({
					...item,
					orderType: item.orderType,
					discountPrice: finalPrice,
					specs: stockSpecs,
					title: goodsName,
					imgUrl: goodsImage
				})
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				let node = this.$refs['mescrollRef']
				if (page.num !== 1) {
					node && node.mescroll.endSuccess(10);
					return
				}
				this.dataInfo = {}
				refundInfo({
					orderNumber: this.orderNumber
				}).then(result => {
					node && node.mescroll.endSuccess(10);
					this.dataInfo = {...result, orderNumber: this.orderNumber}
					this.addressObj = {
						...result.orderAddress
					}
					if ([5, 7].includes(result.orderType)) {
						orderInfo({ orderNumber: this.orderNumber }).then((orderInfo) => {
							this.orderInfo = { ...orderInfo }
						})
					}
				}).catch(() => {
					node && node.mescroll.endErr();
				})
			},
			downCallback() {
				let node = this.$refs['mescrollRef']
				node && node.mescroll.resetUpScroll()
			}
		}
	}
</script>

<style scoped lang="scss">
	.header {
		position: sticky;
		top: 0;
		left: 0;
		z-index: 10200;
		color: #FFFFFF;
		background: linear-gradient(to right, #F94404 0%, #FD164F 100%);
		border: 0;
	}

	.user-card {
		position: relative;
		transform: translateY(-14rpx);
		padding: 42rpx 30rpx 42rpx 40rpx;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
		background-color: #FFFFFF;
	}
</style>
